<template>
  <div class="title">
    <h2 ref="titleRef">{{ message }}</h2>
    <button @click="addMessageContent">增加内容</button>
  </div>
</template>

<script>
import { ref, nextTick } from "vue";

export default {
  setup() {
    const message = ref("哈哈哈");
    const titleRef = ref(null);

    const addMessageContent = () => {
      message.value += "呵呵呵";

      nextTick(() => {
        console.log(titleRef.value.offsetHeight);
      });
    };


    return { message, addMessageContent, titleRef };
  },
};
</script>

<style scoped>
.title {
  width: 100px;
}
</style>
